<template>
  <div class="app-container home">
    <!-- 面板统计组件 -->
    <panel-group :total-count="peopleNumberData.totalCount" :bind-wechat-count="peopleNumberData.bindWechatCount"/>
    <el-row>
      <el-col :span="24">
        <!--次数统计-->
        <el-card header="消费榜前10">
          <div id="topTenSpenders"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="flag" :gutter="20">
      <el-col :span="12">
        <el-card>
          <!--注意：echarts 在初始化实例的时候就要拿到数据，有数据就会展示出来-->
          <bar-chart :xAxisData="monthlyIncomeData.yearMonthList"
                     :seriesData="monthlyIncomeData.totalAmountList" :title="'近6个月的月份的收入统计'"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <!--注意：echarts 在初始化实例的时候就要拿到数据，有数据就会展示出来-->
          <!-- 饼状图：各收入统计 -->
          <bar-chart :xAxisData="monthlyRefundData.yearMonthList"
                     :seriesData="monthlyRefundData.totalAmountList" :title="'近6个月的月份的退费统计'"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BarChart from './dashboard/BarChart'
import PanelGroup from '@v/dashboard/PanelGroup'
import { getMonthlyIncome, getMonthlyRefund, getPeopleNumber, getTopTenSpenders } from '@a/beauty/statistical'
import { Chart } from '@antv/g2'

export default {
  name: 'index',
  components: {
    BarChart,
    Chart,
    PanelGroup
  },
  data() {
    return {
      monthlyIncomeData: {},
      monthlyRefundData: {},
      peopleNumberData: {},
      topTenSpendersData: [],
      flag: false // 判断是否显示图表组件
    }
  },
  created() {
    // 先查询近6个月的月份的收入统计
    this.getMonthlyIncome()
    // 先查询近6个月的月份的退费统计
    this.getMonthlyRefund()
    // 消费榜前10
    this.getTopTenSpenders()
    // 人数统计
    this.getPeopleNumber()

  },
  methods: {
    // 消费榜前10
    async getTopTenSpenders() {
      const { data: data } = await getTopTenSpenders()
      this.topTenSpendersData = data
      const chart = new Chart({
        container: 'topTenSpenders',
        autoFit: true,
        height: 240
      })
      chart.data(this.topTenSpendersData)
      chart.scale('value', {
        formatter: (val) => {
          return val
        }
      })
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.6
      })
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      })
      chart.interval().adjust('stack').position('value').color('extra').label('value', (value) => {
        return {
          content: (data) => {
            return `${data.name}: ${data.value}`
          }
        }
      }).tooltip('extra*value', (item, percent) => {
        return {
          name: item,
          value: percent
        }
      })
      chart.interaction('element-active')
      chart.render()
    },
    async getMonthlyIncome() {
      const { data: data } = await getMonthlyIncome()
      this.monthlyIncomeData = data
    },
    async getMonthlyRefund() {
      const { data: data } = await getMonthlyRefund()
      this.monthlyRefundData = data
    },
    async getPeopleNumber() {
      const { data: data } = await getPeopleNumber()
      this.peopleNumberData = data
      // 先查询到数据后，再加载图表组件，将数据渲染，
      this.flag = true
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

